<template>
  <div class="detail-recommend-info">
    <div class="hot-recommend">
      <h3>热门推荐</h3>
    </div>

    <!-- 推荐商品列表 -->
    <goods-list :goods-list="recommendList" />
  </div>
</template>

<script>
import GoodsList from 'components/content/Goods/GoodsList.vue'

export default {
  name: 'DetailRecommendInfo',
  props: {
    recommendList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  created () {},
  mounted () {
  },
  computed: {},
  methods: {},
  watch: {},
  components: {
    GoodsList
  }
}
</script>

<style lang="less" scoped>
.detail-recommend-info {
  padding: 5px 5px 0;

  .hot-recommend {
    position: relative;
    margin: 10px 0;
    font-size: 18px;
    color: #5c5c5c;
    text-align: center;
    font-weight: 700;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 60px;
      height: 1px;
      background-color: #0e49b5;
    }

    &::before {
      left: 20%;
    }

    &::after {
      right: 20%;
    }
  }
}
</style>
